<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conduit</title>
    <link rel="stylesheet" href="style/index.css">
</head>
<body>
    <div class="box">
        <div class="header">
            <a href="./index.html"><div class="header-left">conduit</div></a>
            <div class="header-right">
                <span><a href="./index.html" style="color: rgba(0, 0, 0, 0.8);">Home</a></span>
                <span><a href="./signIn.html">Sign in</a></span>
                <span><a href="./signUp.html">Sign up</a></span>
            </div>
        </div>
    </div>
    <div class="title">
        <h1>conduit</h1>
        <h5>A place to share your knowledge.</h5>
    </div>
    <div class="content">
        <div class="content-left">
            <div class="left-title">
                <span>Global Feed</span>
            </div>
            <div class="left-content"  id="allContext" >
                <!-- <ul>
                    <div class="content-top">
                        <div>
                           <img src="./images/1.png">
                            <p>
                                <a class="theName">昵称</a>
                                <span class="theTime">时间</span>
                            </p> 
                        </div>
                        <div class="theLike">
                            <div>
                                <span class="theLikeImg">❤</span>
                                <span class="theLikeImg" id="theLikeNum">111</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-text">
                        <p class="text-title">题目</p>
                        <p class="text-des">描述</p>
                    </div>
                    <div class="more">
                        <span>Read more...</span>
                    </div>
                </ul>  -->
            </div>       
        </div>
        <div class="content-right">
            <p>Popular Tags</p>
            <div class="tags">
                <span>&nbsp;implementations&nbsp;</span>
                <span>&nbsp;welcome&nbsp;</span>
                <span>&nbsp;introduction&nbsp;</span>
                <span>&nbsp;codebaseShow&nbsp;</span>
                <span>&nbsp;ipsum&nbsp;</span>
                <span>&nbsp;qui&nbsp;</span>
                <span>&nbsp;quia&nbsp;</span>
                <span>&nbsp;cupiditate&nbsp;</span>
                <span>&nbsp;et&nbsp;</span>
                <span>&nbsp;deserunt&nbsp;</span>
            </div>
        </div>
    </div>

    <script src="js/ajax.js"></script>
    <script>
        let id;
        function getAllContext(){
            myAjax('get','/getAllContext.do','',showContext);
        }
        getAllContext();
        function showContext(){
            let allContext=document.querySelector('#allContext');
            allContext.innerHTML ='';
            let data = JSON.parse(xhr.responseText);

            for(let i = 0;i < data.length;i++){
                allContext.innerHTML +=`
                <ul>
                    <div class="content-top">
                        <div>
                           <img src="${data[i].portrait}">
                            <p>
                                <a class="theName">${data[i].username}</a>
                                <span class="theTime">${data[i].send_time}</span>
                            </p> 
                        </div>
                        <div class="theLike">         
                            <button onmousemove="changeColor()" onmouseout="reducer()" id="numBtn">
                                <span class="theLikeImg">❤</span>
                                <span class="theLikeImg" id="theLikeNum">${data[i].to_like}</span>
                            </button>
                        </div>
                    </div>
                    <div class="content-text">
                        <p class="text-title">${data[i].title}</p>
                        <p class="text-des">${data[i].desctiption}</p>
                    </div>
                    <div class="more">
                        <span>Read more...</span>
                    </div>
                </ul> 
                `
            }
        
        }

        function changeColor(){
            let numBtn=document.querySelector('#numBtn');
            let theLikeImg = document.querySelectorAll('.theLikeImg');
            for(let i=0;i<theLikeImg.length;i++){
                theLikeImg[i].style='color:#fff';
            }
            
        }
        function reducer(){
            let numBtn=document.querySelector('#numBtn');
            let theLikeImg = document.querySelectorAll('.theLikeImg');
            for(let i=0;i<theLikeImg.length;i++){
                theLikeImg[i].style='color:#5cb85c';
            }
        }
    </script>
</body>
</html>